<template>
    <div class="hbox">
        <van-image round width="100px" height="100px" :src="uinfo.headIcon" />
        <h2>{{ uinfo.mobile }}</h2>
    </div>
    <van-cell-group>
        <van-cell center is-link>
            <template #title>
                <van-icon name="coupon" />&nbsp;
                <span class="custom-title">卖座券</span>
            </template>
        </van-cell>
        <van-cell center is-link>
            <template #title>
                <van-icon name="cart-circle" />&nbsp;
                <span class="custom-title">组合红包</span>
            </template>
        </van-cell>
        <van-cell center is-link>
            <template #title>
                <van-icon name="gem" />&nbsp;
                <span class="custom-title">余额</span>
            </template>
            <template #right-icon>
                888.88元 &nbsp;&nbsp;
                <van-icon name="arrow" />
            </template>
        </van-cell>
        <van-cell center is-link>
            <template #title>
                <van-icon name="setting" />&nbsp;
                <span class="custom-title">设置</span>
            </template>
        </van-cell>
    </van-cell-group>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { userInfo } from '../api/apis'
import { UserType } from '../types'

const store = useStore()
const router = useRouter()

if (!store.state.token) {
    router.push('/login')
}

const uinfo = ref<UserType>({
    "userId": 0,
    "mobile": "",
    "gender": 0,
    "headIcon": ""
})

onMounted(async () => {
    const res = await userInfo(store.state.token);
    console.log(res.data.userinfo);
    uinfo.value = res.data.userinfo;
})

</script>

<style scoped lang='scss'>
.hbox {
    display: flex;
    align-items: center;
    padding: 40px;

    h2 {
        font-size: 21px;
        margin-left: 20px;
    }
}
</style>